<template>
    <div class="register">
        <div class="left-side">
            <div class="register-content">
                <p class="left-side-tittle">{{ t('register.operationApplication') }}</p>
                <ElForm
                    ref="formRef"
                    :model="numberValidateForm"
                    class="register-ruleForm"
                    label-position="top"
                    :rules="rules"
                    :inline="true"
                >
                    <ElFormItem :label="t('register.enterpriseName')" prop="name">
                        <ElInput
                            v-model="numberValidateForm.name"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.tel')" prop="phone">
                        <ElInput
                            v-model.number="numberValidateForm.phone"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.email')" prop="email">
                        <ElInput
                            v-model="email"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                            :disabled="true"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.domain')" prop="domain">
                        <ElInput
                            v-model="numberValidateForm.domain"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.USCC')" prop="integrity">
                        <ElInput
                            v-model="numberValidateForm.integrity"
                            class="register-input business-code"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.introduction')" prop="introduce">
                        <ElInput
                            v-model="numberValidateForm.introduce"
                            class="register-introduce"
                            type="textarea"
                            autocomplete="off"
                            maxlength="200"
                            :placeholder="t('register.indPlaceholder')"
                            show-word-limit
                            rows="3"
                            resize="none"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem>
                        <ElButton
                            v-logAction="{
                                page: '/register',
                                item: 'register',
                                descriptions: '用户点击注册提交按钮',
                            }"
                            type="primary"
                            class="registerBtn"
                            @click="submitForm(formRef)"
                        >
                            {{ t('register.submit') }}
                        </ElButton>
                        <p class="register-back">
                            {{ t('register.signedUpTip') }}
                            <ElButton
                                v-logAction="{
                                    page: '/register',
                                    item: 'login',
                                    descriptions: '用户点击立即登录按钮',
                                }"
                                type="text"
                                class="register-back-btn"
                                @click="backToLogin"
                            >
                                {{ t('register.loginImmediately') }}
                            </ElButton>
                        </p>
                    </ElFormItem>
                </ElForm>
            </div>
        </div>
        <div class="right-side fr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ElForm } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { registerApi, getEmailDto } from '@/api/api.query';
import { debounce, setCookie, deleteCookie } from '@/utils/utils';
import { onLocaleChanged, t } from '@/i18n';

const route = useRoute();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const email = ref('');
const router = useRouter();
const identifyCode = ref('');
init();

function init() {
    if (!route.query.id) {
        router.push({ path: '/mailBox-test' });
        return;
    }
    setCookie('SaaS_Token', '111');
    getEmailDto({
        method: 'POST',
        data: {
            id: route.query.id,
        },
    }).then((res) => {
        email.value = res.result;
    });
}

const numberValidateForm = reactive({
    name: '',
    phone: '',
    domain: '',
    integrity: '',
    introduce: '',
});

const rules = ref(getRules());
onLocaleChanged(() => {
    rules.value = getRules();
});
function getRules() {
    return {
        name: [
            {
                required: true,
                message: t('register.rules.enterpriseNameEmpty'),
            },
            {
                min: 2,
                message: t('register.rules.minLength'),
                trigger: 'blur',
            },
        ],
        phone: [
            {
                required: true,
                message: t('register.rules.telMustBeNum'),
            },
            {
                type: 'number',
                message: t('register.rules.telEmpty'),
            },
        ],
        domain: [
            {
                required: true,
                message: t('register.rules.domainEmpty'),
            },
            {
                validator: (rule: any, value: any, callback: any) => {
                    const isValid = /^(?!-)[A-Za-z0-9-]{2,10}(?<!-)$/.test(value);
                    if (!isValid) {
                        return callback(new Error(t('register.rules.domainFormatError')));
                    }
                    callback();
                },
                trigger: 'change',
            },
        ],
        integrity: [
            {
                required: true,
                message: t('register.rules.USCCEmpty'),
            },
            {
                min: 2,
                message: t('register.rules.minLength'),
                trigger: 'blur',
            },
        ],
        introduce: [
            {
                required: true,
                message: t('register.rules.indEmpty'),
            },
            {
                min: 2,
                message: t('register.rules.minLength'),
                trigger: 'blur',
            },
        ],
    } as const;
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    debounce(() => {
        formEl.validate((valid) => {
            if (valid) {
                registerApi({
                    method: 'POST',
                    data: {
                        name: numberValidateForm.name,
                        phone: numberValidateForm.phone,
                        email: email.value,
                        domain: numberValidateForm.domain,
                        number: numberValidateForm.integrity,
                        content: numberValidateForm.introduce,
                        identifyCode: route.query.code,
                    },
                }).then(() => {
                    router.push({ path: '/success' });
                    deleteCookie('SaaS_Token');
                });
            }
        });
    }, 500);
};
function backToLogin() {
    router.push({ path: '/login' });
}
</script>

<style scoped>
.left-side {
    width: 66vw;
    display: flex;
    justify-content: center;
}
.right-side {
    width: 34vw;
    height: 100vh;
    background: url('../../assets/image/register_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.register {
    display: flex;
    align-items: center;
}
.register-content {
    width: 800px;
}
.register-input {
    width: 290px;
    height: 42px;
    border-radius: 5px;
}
.business-code {
    width: 592px;
}
.register-introduce {
    width: 592px;
    border-radius: 5px;
}
.left-side-tittle {
    font-size: 26px;
    color: #333;
    font-weight: 600;
    margin-bottom: 35px;
}
.registerBtn {
    width: 592px;
    margin-top: 8px;
    font-size: 14px;
    background-color: #3ab0a2;
    border-radius: 4px;
    color: #fff;
}
.register-back {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #333333;
}
.register-back-btn {
    color: #3ab0a2;
}
::v-deep .el-form-item {
    margin-bottom: 20px;
}
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0px;
}
::v-deep .el-form-item__label {
    line-height: 20px;
}
</style>
